<template>
  <div style="text-align: right">
    <el-button type="primary" @click="add">新增一级分类</el-button>
  </div>
  <el-table
    :data="tableData"
    border
    v-loading="loading"
    style="width: 100%; margin-top: 10px"
  >
    <el-table-column type="expand">
      <template #default="{ row }">
        <cateGory2 :id="row.id" />
      </template>
    </el-table-column>
    <el-table-column prop="level" label="所属级别" align="center">
      <span style="color: #007acc">一级分类</span>
    </el-table-column>
    <el-table-column prop="id" label="ID" align="center" />
    <el-table-column prop="name" label="名称" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="detailItem(row.id)">
          查看
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="detailItem(row.id, 'edit')"
        >
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="deleteItem(row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    v-model="dialogFormVisible"
    :title="isDisabled ? '详情' : dataForm.id ? '编辑' : '新增'"
    @close="resetForm"
    width="500"
    append-to-body
  >
    <el-form
      :model="dataForm"
      :disabled="isDisabled"
      :rules="formRules"
      ref="dataFormRef"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="dataForm.name" autocomplete="off" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-if="!isDisabled">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submint">确定</el-button>
      </div>
      <div v-else>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import cateGory2 from './classify2.vue'
import { ref, onMounted, computed, nextTick } from 'vue'
import {
  getCateGory1,
  addCategory1,
  updateCategory1,
  deleteCategory1,
  detailCategory1,
} from '@/api/product/classify/index'
import type {
  IItemCateGory,
  IAddItemCateGoryRequestData,
} from '@/api/product/classify/type'
import { ElMessage, ElMessageBox } from 'element-plus'

let loading = ref(false)
let tableData = ref<IItemCateGory[]>([])

onMounted(() => {
  init()
})

const init = async () => {
  loading.value = true
  const res = await getCateGory1()
  console.log(res)
  tableData.value = res.data
  loading.value = false
}

const add = () => {
  isDisabled.value = false
  dialogFormVisible.value = true
}

// 弹出框
let dialogFormVisible = ref(false)
const dataFormRef = ref()
let isDisabled = ref(false)

let dataForm = ref<IAddItemCateGoryRequestData>({
  name: '',
  id: 0,
})

// 重置表单
const resetForm = () => {
  nextTick(() => {
    dataForm.value.id = 0
    dataForm.value.name = ''
  })
  dataFormRef.value.resetFields()
}

const formRules = computed(() => {
  return {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  }
})
const submint = async () => {
  await dataFormRef.value.validate()
  if (!dataForm.value.id) {
    await addCategory1(dataForm.value)
  } else {
    await updateCategory1(dataForm.value)
  }
  ElMessage.success('操作成功')
  dialogFormVisible.value = false
  init()
}

// 单据详情
const detailItem = async (id: number, type?: string) => {
  const res = await detailCategory1(id)
  dataForm.value = res.data
  if (type !== 'edit') {
    isDisabled.value = true
  } else {
    isDisabled.value = false
  }
  dialogFormVisible.value = true
}

// 删除单据
const deleteItem = (id: number) => {
  ElMessageBox.confirm('确定删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await deleteCategory1(id)
      ElMessage.success('操作成功')
      init()
    })
    .catch(() => {})
}
</script>
<style lang="scss" scoped></style>
